<template>
    <el-dialog title="采购订单详情" :visible.sync="thisDetailPage"  style="width:150%; margin-left: -25%;">
        
        <el-divider></el-divider>
    
        <el-form :model="data"  label-width="135px">
            <el-row>
                <el-col :span="24" style="font-weight: bold"> 基本信息</el-col>
            </el-row>
     <el-divider></el-divider>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="采购原因简述：">
                        <div>{{ data.purchaseReason }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采购订单编码：">
                        <div>{{ data.orderNo }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="供应商名称：">
                        <div>{{ data.supplierName }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人：">
                        <div>{{ data.supplierContact }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划到货日期：" >
                        <div>{{ data.expectedArrivalTime }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入库状态：">
                        <div>{{ data.stockStatusDesc }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="审核状态：">
                        <div>{{ data.statusDesc }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款状态：">
                        <div>{{ data.payStatusDesc }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="总金额：">
                        <div>{{ data.amountTotal }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已付金额：">
                        <div>{{ data.paidAmount }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="12">
                    <el-form-item label="未付金额：">
                        <div>{{ data.toPayAmount }}</div>
                    </el-form-item>
                </el-col>
                
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="附件/便笺：">
                        <el-upload
                        action=""
                        class="upload-demo"
                        :file-list="fileList"
                        list-type="text"
                        :show-file-list="true"
                        :disabled="true"
                        >
                        <el-link target="_blank" :href="downloadUrl" :underline="false">
                            <el-button v-if="showFileList()" style="margin-left: 10px;" size="small" type="success" >下载附件</el-button>
                        </el-link>
                        
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
					<el-form-item label="备注：" prop="productRemark">
						<el-input type="textarea" v-model="data.remark" :readonly="true"></el-input>
					</el-form-item>
				</el-col>
            </el-row>

            <div class="form-title"><h3>审核信息</h3></div>
            <el-divider></el-divider>
            <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="提交人" prop="submitor">
                <el-input type="text" v-model="data.submitor" placeholder="提交人" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="提交时间" prop="submitTime">
                <el-date-picker
                    v-model="data.submitTime"
                    type="datetime"
                    placeholder="提交时间"
                    readonly
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="审核人" prop="auditor">
                <el-input type="text" v-model="data.auditor" placeholder="审核人" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="审核时间" prop="authTime">
                <el-date-picker
                    v-model="data.authTime"
                    type="datetime"
                    placeholder="审核时间"
                    readonly
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="审核状态" prop="status">
                <el-select v-model="data.status" placeholder="全部" >
                    <el-option label="全部" value></el-option>
                    <el-option label="未提交" value="0"></el-option>
                    <el-option label="审核中" value="1"></el-option>
                    <el-option label="审核通过" value="2"></el-option>
                    <el-option label="审核拒绝" value="3"></el-option>
                    <el-option label="采购取消" value="4"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                <el-form-item label="审核说明" prop="authDesc">
                <el-input type="textarea" :rows="4" v-model="data.authDesc" placeholder="审核说明" readonly ></el-input>
                </el-form-item>
            </el-col>
            </el-row>

            <div class="form-title">
            <h3>系统信息</h3>
            </div>
            <el-divider></el-divider>
            <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="创建人" prop="creator">
                <el-input type="text" v-model="data.creator" placeholder="创建人" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="创建时间" prop="createTime">
                <el-date-picker
                    v-model="data.createTime"
                    type="datetime"
                    placeholder="创建时间"
                    readonly
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="修改人" prop="reviser">
                <el-input type="text" v-model="data.reviser" placeholder="修改人" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="修改时间" prop="reviseTime">
                <el-date-picker
                    v-model="data.reviseTime"
                    type="datetime"
                    placeholder="修改时间"
                    readonly
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-row>
            
            
            <el-row>
                <el-col :span="24" style="font-weight: bold">采购明细列表</el-col>
            </el-row>
        <el-divider></el-divider>
            <el-table :data="tableData" stripe border>
                <el-table-column type="index" fixed label="序号" width="50"></el-table-column> 
                <el-table-column label="SPU商品" prop="productName"></el-table-column>
                <el-table-column label="SKU商品" prop="productSkuName"></el-table-column>
                <el-table-column label="采购数量" prop="purchaseQuantity"></el-table-column>
                <el-table-column label="采购单位" prop="unitName"></el-table-column>
                <el-table-column label="采购单价（元）" prop="purchasePrice"></el-table-column>
                <el-table-column label="采购金额（元）" prop="purchaseAmount"></el-table-column>
                <el-table-column label="折扣(%)" prop="discountRate" :formatter="formatPercent"></el-table-column>
                <el-table-column label="折后金额（元）" prop="purchaseAmountDiscount"></el-table-column>
                <el-table-column label="已入库数量" prop="stockInQuantity"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="160" :formatter="forDateCreateTime"></el-table-column>
                <el-table-column label="修改时间" prop="reviseTime" width="160" :formatter="forDateReviseTime"></el-table-column>
            </el-table>
        
            <el-divider></el-divider>
            <el-form-item>
                <el-button class="form-cancle-btn"  @click="closeDetailChange" >关闭</el-button>
            </el-form-item>
            
        </el-form>

    </el-dialog>
</template>
<script>
import { getOrderInfo, listOrderDetail } from '@api/purchase/purchase'
import dayjs from 'dayjs'

export default {
    name: 'purchase-detail',
    data() {
        return {
            data: {
                id: "", 
                orderNo: "",    
                amountTotal: "",
                type: "",       
                paidAmount: "",
                toPayAmount: "",
                status: "",     
                payStatus: "",  
                payType: "",    
                settleType: "",
                supplierId: "",
                supplierCode: "",       
                supplierName: "",       
                supplierContact: "",    
                supplierContactPhone: "",
                contractUrl: "",
                expectedArrivalTime: "",
                submitTime: "",
                submitor: "",   
                auditor: "",    
                authTime: "",   
                authDesc: "",   
                stockStatus: "",
                purchaseReason: "",  
                remark: "" 
            },
            loading: false,
            tableData: [],
            thisDetailPage: this.detailPage,
            orderId: this.dOrderId,
            isDisabled: true, 
            fileList: [],
            downloadUrl: ""
        };
    },
    /**双向绑定 start */
    props: ["detailPage", "dOrderId"],
    watch: {
        detailPage(val) {
            this.thisDetailPage = val; //②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
        },
        thisDetailPage(val) {
            this.$emit("on-detailPage-change", val); //③组件内对myResult变更后向外部发送事件通知
        },
        dOrderId(val) {
            this.orderId = val; //②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
            this.fetchData();
        },
        orderId(val) {
            this.$emit("on-detail-change", val); //③组件内对udpateShow变更后向外部发送事件通知
        },
    },
    /**双向绑定 end */
    methods: {
        closeDetailChange() {
            this.thisDetailPage = !this.thisDetailPage;
        },
        handleClose(done) {
            done();
            // this.$confirm("确定关闭吗？")
            //     .then(() => {
            //         done();
            //     })
            //     .catch(() => {
            //     });
        },
        fetchData() {
            this.loading = true;
            if (this.orderId != undefined && this.orderId > 0) {
                this.getOrder(this.orderId);
                this.getOrderDetailList(this.orderId);
            }
        },
        showFileList() {
            if(this.fileList.length > 0) {
                return true;
            } else {
                return false;
            }
        },
        getOrder(orderId) {
            this.loading = true;
            getOrderInfo({
                orderId: orderId,
            })
                .then((res) => {
                    this.data = res.data;
                    this.data.status = res.data.status.toString();
                    this.data.expectedArrivalTime = dayjs(res.data.expectedArrivalTime).format('YYYY-MM-DD');

                    this.fileList = [];

                    if(this.data.contractUrl != "" && this.data.contractUrl != undefined) {
                        this.fileList.push({
                            name: this.data.contractUrl,
                            url: this.data.fullContractUrl
                            // url: "https://hxerp2021.oss-cn-shenzhen.aliyuncs.com/test/20210817/certificate/20210817122734.rar"
                        })
                        this.downloadUrl = this.data.fullContractUrl;
                    }
                    
                    this.loading = false;
                })
                .catch((err) => {
                    console.log("err", err);
                    this.loading = false;
                });
        },
        getOrderDetailList(orderId) {
            this.loading = true;
            listOrderDetail({
                orderId: orderId,
            })
                .then((res) => {
                    this.tableData = res.data;
                    this.loading = false;
                })
                .catch((err) => {
                    console.log("err", err);
                    this.loading = false;
                });
        },
        formatPercent(row, column) {
            return row.discountRate + '%'
        },
        forDateCreateTime (row, column) {
            return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
        },
        forDateReviseTime (row, column) {
            return row.reviseTime == null ? '' : dayjs(row.reviseTime).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    created() {
    },
    mounted() {
        
    },
    computed: {},
    filters: {
        timestampToTime(timestamp) {
            if (timestamp == undefined || timestamp == 0 || timestamp == "") {
                return "-";
            }
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var D = date.getDate() + " ";
            var h = date.getHours() + ":";
            var m = date.getMinutes() + ":";
            var s = date.getSeconds();
            return Y + M + D + h + m + s;
        }
    }
};
</script>